<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="d" uri="http://dgg.net/jsp/jstl/core" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>

<div class="dialog-warp-ajax" id="chooseCommodity">
    <ul class="screen-search">
        <li>
            <label>已选产品：</label>
            <input type="text" class="dggui-input" value="${choosedProduct}" readonly>
        </li>
        <li>
            <label>商品快速搜索：</label>
            <input type="text" id="attributeName" class="dggui-input" placeholder="商品快速搜索">
        </li>
        <li>
            <button class="dggui-btn" onclick="goodSearch('${productId}')">搜索</button>
        </li>
    </ul>
    <div class="choose-commodity-warp">
        <h3>选择产品</h3>
        <div class="choose-commodity-list" id="chooseCommodityList">
            <ul>
                <c:forEach items="${goodsList}" var="item">
                    <c:choose>
                        <c:when test="${goodId  eq item.id}">
                            <li data-id="${item.id}" class="active">${item.goodsAttribute}</li>
                        </c:when>
                        <c:otherwise >
                            <li data-id="${item.id}" >${item.goodsAttribute}</li>
                        </c:otherwise>
                    </c:choose>
                </c:forEach>
            </ul>
        </div>
    </div>
</div>
<script>
    dggui.use(['jquery','dialog'],function () {
        var $ = dggui.jquery;
        $('#chooseCommodityList li').click(function () {
            var isActive=$(this).hasClass('active');
            $('#chooseCommodityList li').attr("class", "");
            if(isActive) {
                $(this).removeClass('active');
            }else {
                $(this).addClass('active');
            }
        })
    });


    function goodSearch(productId) {
        var attributeName=$('#attributeName').val();
        $.ajax({
            type: 'POST',
            async: false,
            url: sysInfo.basePath + "/rzsc/common/find_goods.do",
            data:{
                goodsName:attributeName,
                productId:productId
            },
            success: function (res) {
                if (res.code == 0) {
                    $("#chooseCommodityList").find("li").remove();
                    var ulDom = $("#chooseCommodityList").find("ul");
                    $.each(res.data, function (i, item) {
                        var htm=" <li data-id= "+item.id+">"+item.attribute+"</li>";
                        ulDom.append(htm);
                    })
                }
            }
            })
    }
</script>